@charset "utf-8";
/* CSS Document */

*{margin:0;padding:0;}
body{overflow-x:hidden;font-size:12px;}
li{list-style:none;font-family:"Microsoft YaHei","微软雅黑","Arial","verdana","宋体";}
.clear {height:0px;clear:both;}
textarea{font-family:"Microsoft YaHei","微软雅黑","Arial","黑体","verdana","宋体";}
div{font-family:"Microsoft YaHei","微软雅黑","Arial","黑体","verdana","宋体";}
p{font-family:"Microsoft YaHei","微软雅黑","Arial","黑体","verdana","宋体";}
a{text-decoration:none;font-family:"Microsoft YaHei","微软雅黑","Arial","黑体","verdana","宋体";cursor:pointer;}
a:hover{text-decoration:none;}
img{ border:none;}
@font-face {font-family: 'montserrat-light-webfont';src: local('montserrat-light-webfont'), url(../imagescn/sylx/montserrat-light-webfont.woff) format('woff');}



/*顶部*/
div.publicheadback{ width:100%; height:118px; background:url(../imagescn/sylx/indexheadpublic.jpg) center no-repeat;}
div.publichead{ width:1200px; height:118px; margin:auto;}
div.publicheadleft{ width:491px; height:55px; float:left; margin-top:31px; margin-left:20px;}
div.publicheadright{ width:249px; height:118px; float:right;}
div.publicnavback{ width:100%; height:71px; background:url(../imagescn/sylx/publicnavbg.png) center no-repeat; position:relative; z-index:9999;}
div.publicnav{ width:1200px; height:71px; margin:auto;}
div.publicnavmiddle{ width:1006px; height:71px; margin-left:98px; margin-top:4px; float:left;}
div.publicnavmiddle ul li{ width:100px; height:42px; float:left; background:url(../imagescn/sylx/navbg.png) center right no-repeat; color:#ffffff; font-size:14px; line-height:42px; text-align:center;}
div.publicnavmiddle ul li a.erjicolor{ color:#fff;} 
div.publicnavmiddlelihborder{ width:100px; height:17px;}
div.publicnavmiddle ul li:hover a.erjicolor{ color:#dd1313;}
div.publicnavmiddle ul li:hover div.publicnavmiddlelihborder{  background:url(../imagescn/sylx/navhbg.png) top center no-repeat;}
div.publicnavxialaback{ width:1199px; height:0px; background:url(../imagescn/sylx/publicxialabg.jpg) center no-repeat; position:relative; overflow:hidden; transition:all 0.4s; } 
div#xiala1{ margin-left:-98px;}
div#xiala2{ margin-left:-198px;} 
div#xiala3{ margin-left:-298px;}
div#xiala4{ margin-left:-398px;}
div#xiala5{ margin-left:-498px;}
div#xiala6{ margin-left:-598px;}
div#xiala7{ margin-left:-698px;}
div#xiala8{ margin-left:-798px;}
div#xiala9{ margin-left:-898px;}
div#xiala10{ margin-left:-998px;}
div.publicnavxialaleftimg{ width:327px; height:191px; position:absolute; left:0; top:0;}
div.publicnavxialawenziback{ width:1181px; height:176px; background:url(../imagescn/sylx/publicxialawenzibg.png) center no-repeat; position:absolute; top:8px; left:8px;}
div.publicnavxialawenzirightback{ width:857px; height:144px; float:right; overflow:hidden;}
div.publicnavxialawenzirightback ul li{ width:auto; text-align:left; padding-left:11px; display:inline-block; margin-right:34px; color:#212121; font-size:14px; line-height:47px; height:47px; border-bottom:1px solid transparent; background:url(../imagescn/sylx/xialawenzibg.png) center left no-repeat;}
div.publicnavxialawenzirightback ul li a{ color:#212121;  }
div.publicnavxialawenzirightback ul li:hover a{ color:#7c0606;border-bottom: solid 1px #dd1313;}
div.publicnavxialawenzirightback ul li:hover{ background:url(../imagescn/sylx/xialawenzih.png) center left no-repeat;}
div.publicnavmiddle ul li:hover div#xiala4{ height:191px;}
div.publicnavmiddle ul li:hover div#xiala2{ height:68px;}
div.publicnavmiddle ul li:hover div#xiala3{ height:68px;}

/*底部*/
div.publicfooterback{ width:100%; height:472px; background:url(../imagescn/sylx/publicfooterback.jpg) center no-repeat;  margin-top: -1px;position: relative; margin-top:0.5px;}
div.publicfooternavback{ width:1200px; height:80px; margin:auto; position:relative;}
div.dibusaoyisao{ width:150px; height:174px; position:absolute; background:url(../imagescn/sylx/saoyisao.png) center no-repeat;    top: 126px;
    left: 421px;}  
div.publicfooternavback ul li{ line-height:80px; float:left; margin-left:45px; color:#686464; font-size:14px;}
div.publicfooternavback ul li a{ color:#686464; transition:all 0.4s;}
div.publicfooternavback ul li a:hover{ color:#d51412;}
div.publicfooterxinxiback{ width:1200px; height:105px; margin:auto;}
div.publicfooterxinxi{ width:600px; height:105px; float:left; overflow:hidden; line-height:21px; color:#767676; font-size:12px;}

div.publicfooteranniuback{ width:1200px; height:31px; margin:auto;}
div.publicfooteranniu{ width:132px; height:31px; margin-top:11px; margin-left:-14px;}
div.publicfooteranniunav{ width:31px; height:31px; float:left; margin-left:19px; overflow:hidden;}
div.publicfooteranniunav a{ width:31px; height:31px; display:block;}
div.publicfooterbottomback{ width:1200px; height:59px; margin:auto;}
div.publicfooterbottomback p{ line-height:59px; text-align:center; color:#151515; font-size:12px;}
div.publicfooterbottomback p a{color:#151515;}
/*按钮配置*/
.cbutton {
	position: relative;
	display: inline-block;
	padding: 0;
	border: none;
	background: none;
	color: #fff;
	font-size: 1.4em;
	overflow: visible;
	-webkit-transition: color 0.7s;
	transition: color 0.7s;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.cbutton.cbutton--click,
.cbutton:focus {
	outline: none;
	color: #fff;
}

.cbutton__icon {
	display: block;
}

.cbutton__text {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.cbutton::after {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -35px 0 0 -35px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	content: '';
	opacity: 0;
	pointer-events: none;
}

.cbutton--box {
	width: 24px;
	height: 24px;
	border: 4px solid rgb(255, 255, 255);
}

.cbutton--box-color-1 {
	background: #fff;
}

.cbutton--box-color-2 {
	background: #fff;
}

.cbutton--box-color-3 {
	background: #fff;
}

.cbutton--box-color-4 {
	background: #fff;
}

.cbutton--box-color-5 {
	background: #fff;
}

.cbutton--box-color-6 {
	background: #fff;
}

.cbutton--box-color-7 {
	background: #fff;
}

.cbutton--box-color-8 {
	background: #fff;
}

.cbutton--box-color-9 {
	background: #fff;
}

/* Individual Effects */

/* Effect Boris */
.cbutton--effect-boris::after {
	background: rgba(255,255,255,0.1);
}

.cbutton--effect-boris.cbutton--click::after {
	-webkit-animation: anim-effect-boris 0.3s forwards;
	animation: anim-effect-boris 0.3s forwards;
}

@-webkit-keyframes anim-effect-boris {
	0% {
		-webkit-transform: scale3d(0.3, 0.3, 1);
		transform: scale3d(0.3, 0.3, 1);
	}
	25%, 50% {
		opacity: 1;
	}
	to {
		opacity: 0;
		-webkit-transform: scale3d(1.2, 1.2, 1);
		transform: scale3d(1.2, 1.2, 1);
	}
}

@keyframes anim-effect-boris {
	0% {
		-webkit-transform: scale3d(0.3, 0.3, 1);
		transform: scale3d(0.3, 0.3, 1);
	}
	25%, 50% {
		opacity: 1;
	}
	to {
		opacity: 0;
		-webkit-transform: scale3d(1.2, 1.2, 1);
		transform: scale3d(1.2, 1.2, 1);
	}
}

/* Jelena */
.cbutton--effect-jelena::after {
	border: 2px solid rgba(255,255,255,0.5);
}

.cbutton--effect-jelena.cbutton--click::after {
	-webkit-animation: anim-effect-jelena 0.3s ease-out forwards;
	animation: anim-effect-jelena 0.3s ease-out forwards;
}

@-webkit-keyframes anim-effect-jelena {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	to {
		opacity: 0;
		-webkit-transform: scale3d(1.2, 1.2, 1);
		transform: scale3d(1.2, 1.2, 1);
	}
}

@keyframes anim-effect-jelena {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	to {
		opacity: 0;
		-webkit-transform: scale3d(1.2, 1.2, 1);
		transform: scale3d(1.2, 1.2, 1);
	}
}

/* Radomir */
.cbutton--effect-radomir::after {
	box-shadow: inset 0 0 0 35px rgba(255,255,255,0);
}

.cbutton--effect-radomir.cbutton--click::after {
	-webkit-animation: anim-effect-radomir 0.5s ease-out forwards;
	animation: anim-effect-radomir 0.5s ease-out forwards;
}

@-webkit-keyframes anim-effect-radomir {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.4, 0.4, 1);
		transform: scale3d(0.4, 0.4, 1);
	}
	80% {
		box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8);
		opacity: 0.1;
	}
	100% {
		box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8);
		opacity: 0;
		-webkit-transform: scale3d(1.2, 1.2, 1);
		transform: scale3d(1.2, 1.2, 1);
	}
}

@keyframes anim-effect-radomir {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.4, 0.4, 1);
		transform: scale3d(0.4, 0.4, 1);
	}
	80% {
		box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8);
		opacity: 0.1;
	}
	100% {
		box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8);
		opacity: 0;
		-webkit-transform: scale3d(1.2, 1.2, 1);
		transform: scale3d(1.2, 1.2, 1);
	}
}

/* Sanja */
.cbutton--effect-sanja::after {
	background: rgba(255,255,255,0.1);
}

.cbutton--effect-sanja.cbutton--click::after {
	-webkit-animation: anim-effect-sanja 1s ease-out forwards;
	animation: anim-effect-sanja 1s ease-out forwards;
}

@-webkit-keyframes anim-effect-sanja {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	25% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes anim-effect-sanja {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	25% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

/* Novak */
.cbutton--effect-novak::after {
	background: rgba(255,255,255,0.25);
}

.cbutton--effect-novak.cbutton--click::after {
	-webkit-animation: anim-effect-novak 0.5s forwards;
	animation: anim-effect-novak 0.5s forwards;
}

@-webkit-keyframes anim-effect-novak {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.1, 0.1, 1);
		transform: scale3d(0.1, 0.1, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(8, 8, 1);
		transform: scale3d(8, 8, 1);
	}
}

@keyframes anim-effect-novak {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.1, 0.1, 1);
		transform: scale3d(0.1, 0.1, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(8, 8, 1);
		transform: scale3d(8, 8, 1);
	}
}

/* Ilinka */
.cbutton--effect-ilinka::after {
	background: rgba(255,255,255,0.25);
}

.cbutton--effect-ilinka.cbutton--click::after {
	-webkit-animation: anim-effect-ilinka 0.5s ease-out forwards;
	animation: anim-effect-ilinka 0.5s ease-out forwards;
}

@-webkit-keyframes anim-effect-ilinka {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes anim-effect-ilinka {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* Marin */
.cbutton--effect-marin::after {
	box-shadow: inset 0 0 0 3px rgba(255,255,255,0.05);
}

.cbutton--effect-marin.cbutton--click::after {
	-webkit-animation: anim-effect-marin 0.5s ease-out forwards;
	animation: anim-effect-marin 0.5s ease-out forwards;
}

@-webkit-keyframes anim-effect-marin {
	0% {
		opacity: 1;
	}
	100% {
		box-shadow: inset 0 0 0 3px rgba(255,255,255,0.8);
		opacity: 0;
		-webkit-transform: scale3d(0.75, 0.75, 1);
		transform: scale3d(0.75, 0.75, 1);
	}
}

@keyframes anim-effect-marin {
	0% {
		opacity: 1;
	}
	100% {
		box-shadow: inset 0 0 0 3px rgba(255,255,255,0.8);
		opacity: 0;
		-webkit-transform: scale3d(0.75, 0.75, 1);
		transform: scale3d(0.75, 0.75, 1);
	}
}

/* Nikola */
.cbutton--effect-nikola::after {
	background: rgba(255,255,255,0.1);
}

.cbutton--effect-nikola.cbutton--click::after {
	-webkit-animation: anim-effect-nikola 0.5s forwards;
	animation: anim-effect-nikola 0.5s forwards;
}

@-webkit-keyframes anim-effect-nikola {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(0.2, 0.2, 1);
		transform: scale3d(0.2, 0.2, 1);
	}
	50% {
		opacity: 1;
		-webkit-transform: scale3d(1.2, 1.2, 1);
		transform: scale3d(1.2, 1.2, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(0.8, 0.8, 1);
		transform: scale3d(0.8, 0.8, 1);
	}
}

@keyframes anim-effect-nikola {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(0.2, 0.2, 1);
		transform: scale3d(0.2, 0.2, 1);
	}
	50% {
		opacity: 1;
		-webkit-transform: scale3d(1.2, 1.2, 1);
		transform: scale3d(1.2, 1.2, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(0.8, 0.8, 1);
		transform: scale3d(0.8, 0.8, 1);
	}
}

/* Tamara */
.cbutton--effect-tamara::after {
	box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
}

.cbutton--effect-tamara.cbutton--click::after {
	-webkit-animation: anim-effect-tamara 0.5s ease-out forwards;
	animation: anim-effect-tamara 0.5s ease-out forwards;
}

@-webkit-keyframes anim-effect-tamara {
	0% {
		box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
		opacity: 1;
		-webkit-transform: scale3d(0.6, 0.6, 1);
		transform: scale3d(0.6, 0.6, 1);
	}
	100% {
		box-shadow: 0 0 0 100px rgba(255,255,255,0);
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes anim-effect-tamara {
	0% {
		box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
		opacity: 1;
		-webkit-transform: scale3d(0.6, 0.6, 1);
		transform: scale3d(0.6, 0.6, 1);
	}
	100% {
		box-shadow: 0 0 0 100px rgba(255,255,255,0);
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

/* Zoran */
.cbutton--effect-zoran::after {
	background: rgba(255,255,255,0.1);
}

.cbutton--effect-zoran.cbutton--click::after {
	-webkit-animation: anim-effect-zoran 0.5s ease-out forwards;
	animation: anim-effect-zoran 0.5s ease-out forwards;
}

@-webkit-keyframes anim-effect-zoran {
	0% {
		opacity: 0.2;
	}
	50% {
		opacity: 1;
		-webkit-transform: scale3d(0.6, 1, 1);
		transform: scale3d(0.6, 1, 1);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	100% {
		opacity: 0.3;
		-webkit-transform: scale3d(1.1, 1.1, 1);
		transform: scale3d(1.1, 1.1, 1);
	}
}

@keyframes anim-effect-zoran {
	0% {
		opacity: 0.2;
	}
	50% {
		opacity: 1;
		-webkit-transform: scale3d(0.6, 1, 1);
		transform: scale3d(0.6, 1, 1);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	100% {
		opacity: 0.3;
		-webkit-transform: scale3d(1.1, 1.1, 1);
		transform: scale3d(1.1, 1.1, 1);
	}
}

/* Ivana */
.cbutton--effect-ivana::before {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -35px 0 0 -35px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	content: '';
	opacity: 0;
	pointer-events: none;
}

.cbutton--effect-ivana::before,
.cbutton--effect-ivana::after {
	box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
}

.cbutton--effect-ivana.cbutton--click::before {
	-webkit-animation: anim-effect-ivana-1 0.5s forwards;
	animation: anim-effect-ivana-1 0.5s forwards;
}

.cbutton--effect-ivana.cbutton--click::after {
	-webkit-animation: anim-effect-ivana-2 0.5s forwards;
	animation: anim-effect-ivana-2 0.5s forwards;
}

@-webkit-keyframes anim-effect-ivana-1 {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1.1, 1.1, 1);
		transform: scale3d(1.1, 1.1, 1);
	}
}

@keyframes anim-effect-ivana-1 {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1.1, 1.1, 1);
		transform: scale3d(1.1, 1.1, 1);
	}
}

@-webkit-keyframes anim-effect-ivana-2 {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	50%, 100% {
		opacity: 0;
		-webkit-transform: scale3d(1.2, 1.2, 1);
		transform: scale3d(1.2, 1.2, 1);
	}
}

@keyframes anim-effect-ivana-2 {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	50%, 100% {
		opacity: 0;
		-webkit-transform: scale3d(1.2, 1.2, 1);
		transform: scale3d(1.2, 1.2, 1);
	}
}

/* Marko */
.cbutton--effect-marko::after {
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.3);
}

.cbutton--effect-marko.cbutton--click::after {
	-webkit-animation: anim-effect-marko 0.5s forwards;
	animation: anim-effect-marko 0.5s forwards;
}

@-webkit-keyframes anim-effect-marko {
	0% {
		opacity: 1;
	}
	50% {
		box-shadow: inset 0 0 0 35px rgba(255,255,255,0.1);
		opacity: 1;
	}
	100% {
		box-shadow: inset 0 0 0 35px rgba(255,255,255,0.1);
		opacity: 0;
		-webkit-transform: scale3d(1.1, 1.1, 1);
		transform: scale3d(1.1, 1.1, 1);
	}
}

@keyframes anim-effect-marko {
	0% {
		opacity: 1;
	}
	50% {
		box-shadow: inset 0 0 0 35px rgba(255,255,255,0.1);
		opacity: 1;
	}
	100% {
		box-shadow: inset 0 0 0 35px rgba(255,255,255,0.1);
		opacity: 0;
		-webkit-transform: scale3d(1.1, 1.1, 1);
		transform: scale3d(1.1, 1.1, 1);
	}
}

/* Stoja */
.cbutton--effect-stoja::before {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -35px 0 0 -35px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	content: '';
	opacity: 0;
	pointer-events: none;
}

.cbutton--effect-stoja::before,
.cbutton--effect-stoja::after {
	box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
}

.cbutton--effect-stoja-left::before,
.cbutton--effect-stoja-left::after {
	-webkit-clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 0% 50%);
	clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 0% 50%);
}

.cbutton--effect-stoja-top::before,
.cbutton--effect-stoja-top::after {
	-webkit-clip-path: polygon(10% 0%, 90% 0%, 50% 50%);
	clip-path: polygon(25% 0%, 75% 0%, 50% 50%);
}

.cbutton--effect-stoja-right::before,
.cbutton--effect-stoja-right::after {
	-webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 50%, 50% 50%);
	clip-path: polygon(50% 0%, 100% 0%, 100% 50%, 50% 50%);
}

.cbutton--effect-stoja.cbutton--click::before {
	-webkit-animation: anim-effect-stoja-1 0.5s forwards;
	animation: anim-effect-stoja-1 0.5s forwards;
}

.cbutton--effect-stoja.cbutton--click::after {
	-webkit-animation: anim-effect-stoja-2 0.5s forwards;
	animation: anim-effect-stoja-2 0.5s forwards;
}

@-webkit-keyframes anim-effect-stoja-1 {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.3, 0.3, 1);
		transform: scale3d(0.3, 0.3, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes anim-effect-stoja-1 {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.3, 0.3, 1);
		transform: scale3d(0.3, 0.3, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@-webkit-keyframes anim-effect-stoja-2 {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1.5, 1.5, 1);
		transform: scale3d(1.5, 1.5, 1);
	}
}

@keyframes anim-effect-stoja-2 {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1.5, 1.5, 1);
		transform: scale3d(1.5, 1.5, 1);
	}
}

/* Azra */
.cbutton--effect-azra img {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -35px 0 0 -35px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.cbutton--effect-azra.cbutton--click img {
	-webkit-animation: anim-effect-azra 0.5s ease-in forwards;
	animation: anim-effect-azra 0.5s ease-in forwards;
}

@-webkit-keyframes anim-effect-azra {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(0.2, 0.2, 1) translate3d(0, 100%, 0);
		transform: scale3d(0.2, 0.2, 1) translate3d(0, 100%, 0);
	}
	50% {
		opacity: 0.7;
		-webkit-transform: scale3d(0.5, 0.5, 1) translate3d(0, 100%, 0);
		transform: scale3d(0.5, 0.5, 1) translate3d(0, 100%, 0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(0.5, 0.5, 1) translate3d(0, 200%, 0);
		transform: scale3d(0.5, 0.5, 1) translate3d(0, 200%, 0);
	}
}

@keyframes anim-effect-azra {
	0% {
		opacity: 0.5;
		-webkit-transform: scale3d(0.2, 0.2, 1) translate3d(0, 100%, 0);
		transform: scale3d(0.2, 0.2, 1) translate3d(0, 100%, 0);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(0.5, 0.5, 1) translate3d(0, 200%, 0);
		transform: scale3d(0.5, 0.5, 1) translate3d(0, 200%, 0);
	}
}

/* Dejan */

.cbutton--effect-dejan::after {
	margin: -4px 0 0 -4px;
	width: 8px;
	height: 8px;
}

.cbutton--box-color-4.cbutton--effect-dejan::after {
	background: #fff;
}

.cbutton--box-color-5.cbutton--effect-dejan::after {
	background: #fff;
}

.cbutton--box-color-6.cbutton--effect-dejan::after {
	background: #fff;
}

.cbutton--effect-dejan .cbutton__helper {
	position: absolute;
	bottom: 0;
	opacity: 0;
	pointer-events: none;
}

.cbutton--effect-dejan .cbutton__helper--first {
	left: -15px;
	width: 30px;
	height: 30px;
	-webkit-transform-origin: -40% 50%;
	transform-origin: -40% 50%;
}

.cbutton--effect-dejan .cbutton__helper--second {
	left: 0px;
	width: 30px;
	height: 60px;
	-webkit-transform-origin: 140% 50%;
	transform-origin: 140% 50%;
}

.cbutton--effect-dejan .cbutton__helper img {
	position: absolute;
	top: 0;
	left: 0;
}

.cbutton--effect-dejan.cbutton--click .cbutton__helper--first {
	-webkit-animation: anim-effect-dejan-1 0.3s ease-out forwards;
	animation: anim-effect-dejan-1 0.3s ease-out forwards;
}

.cbutton--effect-dejan.cbutton--click .cbutton__helper--second {
	-webkit-animation: anim-effect-dejan-2 0.3s ease-out forwards;
	animation: anim-effect-dejan-2 0.3s ease-out forwards;
}

.cbutton--effect-dejan.cbutton--click .cbutton__helper--first img,
.cbutton--effect-dejan.cbutton--click .cbutton__helper--second img {
	-webkit-animation: anim-effect-dejan-3 0.3s ease-in forwards;
	animation: anim-effect-dejan-3 0.3s ease-in forwards;
}

.cbutton--effect-dejan.cbutton--click::after {
	-webkit-animation: anim-effect-dejan-4 0.3s ease-out forwards;
	animation: anim-effect-dejan-4 0.3s ease-out forwards;
}

@-webkit-keyframes anim-effect-dejan-1 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate3d(0, 0, 1, -90deg);
		transform: rotate3d(0, 0, 1, -90deg);
	}
}

@keyframes anim-effect-dejan-1 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate3d(0, 0, 1, -90deg);
		transform: rotate3d(0, 0, 1, -90deg);
	}
}

@-webkit-keyframes anim-effect-dejan-2 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate3d(0, 0, 1, 90deg);
		transform: rotate3d(0, 0, 1, 90deg);
	}
}

@keyframes anim-effect-dejan-2 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate3d(0, 0, 1, 90deg);
		transform: rotate3d(0, 0, 1, 90deg);
	}
}

@-webkit-keyframes anim-effect-dejan-3 {
	0% {
		-webkit-transform: scale3d(0.4, 0.4, 1);
		transform: scale3d(0.4, 0.4, 1);
	}
	50% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes anim-effect-dejan-3 {
	0% {
		-webkit-transform: scale3d(0.4, 0.4, 1);
		transform: scale3d(0.4, 0.4, 1);
	}
	50% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@-webkit-keyframes anim-effect-dejan-4 {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.1, 0.1, 1);
		transform: scale3d(0.1, 0.1, 1);
	}
	80% {
		opacity: 0.7;
		-webkit-transform: translate3d(0, -70px, 0) scale3d(1, 1, 1);
		transform: translate3d(0, -70px, 0) scale3d(1, 1, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, -60px, 0) scale3d(1, 1, 1);
		transform: translate3d(0, -60px, 0) scale3d(1, 1, 1);
	}
}

@keyframes anim-effect-dejan-4 {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.1, 0.1, 1);
		transform: scale3d(0.1, 0.1, 1);
	}
	80% {
		opacity: 0.7;
		-webkit-transform: translate3d(0, -70px, 0) scale3d(1, 1, 1);
		transform: translate3d(0, -70px, 0) scale3d(1, 1, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, -60px, 0) scale3d(1, 1, 1);
		transform: translate3d(0, -60px, 0) scale3d(1, 1, 1);
	}
}

/* Filipa */
.cbutton--effect-filipa::after {
	border-radius: 0px;
	box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
}

.cbutton--effect-filipa.cbutton--effect-filipa-left.cbutton--click::after {
	-webkit-animation: anim-effect-filipa-left 0.5s forwards;
	animation: anim-effect-filipa-left 0.5s forwards;
}

@-webkit-keyframes anim-effect-filipa-left {
	0% {
		opacity: 0.7;
		-webkit-transform: scale3d(0.2, 0.2, 1);
		transform: scale3d(0.2, 0.2, 1) 
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -135deg);
		transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -135deg);
	}
}

@keyframes anim-effect-filipa-left {
	0% {
		opacity: 0.7;
		-webkit-transform: scale3d(0.2, 0.2, 1);
		transform: scale3d(0.2, 0.2, 1) 
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -135deg);
		transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -135deg);
	}
}

.cbutton--effect-filipa.cbutton--effect-filipa-right.cbutton--click::after {
	-webkit-animation: anim-effect-filipa-right 0.5s forwards;
	animation: anim-effect-filipa-right 0.5s forwards;
}

@-webkit-keyframes anim-effect-filipa-right {
	0% {
		opacity: 0.7;
		-webkit-transform: scale3d(0.2, 0.2, 1);
		transform: scale3d(0.2, 0.2, 1) 
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 135deg);
		transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 135deg);
	}
}

@keyframes anim-effect-filipa-right {
	0% {
		opacity: 0.7;
		-webkit-transform: scale3d(0.2, 0.2, 1);
		transform: scale3d(0.2, 0.2, 1) 
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 135deg);
		transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 135deg);
	}
}

/* Lazar */
.cbutton--effect-lazar-inverted {
	-webkit-transform: scale3d(-1, 1, 1);
	transform: scale3d(-1, 1, 1);
}
.cbutton--effect-lazar::before {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -35px 0 0 0;
	width: 35px;
	height: 70px;
    border-radius: 0 35px 35px 0;
	background: rgba(255,255,255,0.15);
	content: '';
	opacity: 0;
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	pointer-events: none;
}

.cbutton--effect-lazar::after {
	right: 50%;
	left: auto;
	margin: -35px 0 0 0;
	width: 35px;
	height: 70px;
	border-radius: 35px 0 0 35px;
	background: rgba(255,255,255,0.1);
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
}

.cbutton--effect-lazar.cbutton--click::before {
	-webkit-animation: anim-effect-lazar-1 0.8s ease-out forwards;
	animation: anim-effect-lazar-1 0.8s ease-out forwards;
}

.cbutton--effect-lazar.cbutton--click::after {
	-webkit-animation: anim-effect-lazar-2 0.8s ease-out forwards;
	animation: anim-effect-lazar-2 0.8s ease-out forwards;
}

@-webkit-keyframes anim-effect-lazar-1 {
	0%, 25% {
		opacity: 1;
		-webkit-transform: perspective(1000px) rotate3d(0, 1, 0, 0deg);
		transform: perspective(1000px) rotate3d(0, 1, 0, 0deg);
	}
	100% {
		opacity: 0;
		-webkit-transform: perspective(1000px) rotate3d(0, 1, 0, 180deg);
		transform: perspective(1000px) rotate3d(0, 1, 0, 180deg);
	}
}

@keyframes anim-effect-lazar-1 {
	0%, 25% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: perspective(1000px) rotate3d(0, 1, 0, 180deg);
		transform: perspective(1000px) rotate3d(0, 1, 0, 180deg);
	}
}

@-webkit-keyframes anim-effect-lazar-2 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes anim-effect-lazar-2 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* Jagoda */
.cbutton--effect-jagoda::before {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	content: '';
	opacity: 0;
	pointer-events: none;
}

.cbutton--effect-jagoda::after {
	margin: -25px 0 0 -25px;
	width: 50px;
	height: 50px;
}

.cbutton--effect-jagoda::before,
.cbutton--effect-jagoda::after {
	box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
}

.cbutton--effect-jagoda.cbutton--click::before,
.cbutton--effect-jagoda.cbutton--click::after {
	-webkit-animation-name: anim-effect-jagoda-2, anim-effect-jagoda-1;
	animation-name:anim-effect-jagoda-2, anim-effect-jagoda-1;
	-webkit-animation-duration: 1.2s;
	animation-duration: 1.2s;
	-webkit-animation-iteration-count: 5;
	animation-iteration-count: 5;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.cbutton--effect-jagoda.cbutton--click::after {
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}

@-webkit-keyframes anim-effect-jagoda-1 {
	0%, 100% {
		opacity: 0;
	}
	40%, 60% {
		opacity: 1;
	}
}

@keyframes anim-effect-jagoda-1 {
	0%, 100% {
		opacity: 0;
	}
	40%, 60% {
		opacity: 1;
	}
}

@-webkit-keyframes anim-effect-jagoda-2 {
	0% {
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	100% {
		-webkit-transform: scale3d(1.4, 1.4, 1);
		transform: scale3d(1.4, 1.4, 1);
	}
}

@keyframes anim-effect-jagoda-2 {
	0% {
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	100% {
		-webkit-transform: scale3d(1.4, 1.4, 1);
		transform: scale3d(1.4, 1.4, 1);
	}
}

/* Simo */
.cbutton--effect-simo::before {
	position: absolute;
	top: 50%;
	left: -20px;
	margin: -4px 0 0 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255,255,255,0.3);
	content: '';
	opacity: 0;
	-webkit-transform-origin: 35px 50%;
	transform-origin: 35px 50%;
}

.cbutton--effect-simo::after {
	border: 8px solid rgba(255,255,255,0.1);
}

.cbutton--effect-simo.cbutton--click::after {
	-webkit-animation: anim-effect-simo-1 5s forwards;
	animation: anim-effect-simo-1 5s forwards;
}

.cbutton--effect-simo.cbutton--click::before {
	-webkit-animation-name: anim-effect-simo-2, anim-effect-simo-3;
	animation-name: anim-effect-simo-2, anim-effect-simo-3;
	-webkit-animation-duration: 5s, 0.4s;
	animation-duration: 5s, 0.4s;
	-webkit-animation-iteration-count: 1, infinite;
	animation-iteration-count: 1, infinite;
	-webkit-animation-timing-function: ease, linear;
	animation-timing-function: ease, linear;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

@-webkit-keyframes anim-effect-simo-1 {
	0%, 100% {
		-webkit-transform: scale3d(0, 0, 1);
		transform: scale3d(0, 0, 1);
		opacity: 0;
	}
	5%, 95% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes anim-effect-simo-1 {
	0%, 100% {
		-webkit-transform: scale3d(0, 0, 1);
		transform: scale3d(0, 0, 1);
		opacity: 0;
	}
	5%, 95% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@-webkit-keyframes anim-effect-simo-2 {
	0%, 5%, 95%, 100% {
		opacity: 0;
	}
	10%, 90% {
		opacity: 1;
	}
}

@keyframes anim-effect-simo-2 {
	0%, 5%, 95%, 100% {
		opacity: 0;
	}
	10%, 90% {
		opacity: 1;
	}
}

@-webkit-keyframes anim-effect-simo-3 {
	100% {
		-webkit-transform: rotate3d(0, 0, 1, 360deg);
		transform: rotate3d(0, 0, 1, 360deg);
	}
}

@keyframes anim-effect-simo-3 {
	100% {
		-webkit-transform: rotate3d(0, 0, 1, 360deg);
		transform: rotate3d(0, 0, 1, 360deg);
	}
}

/* Milan */
.cbutton--effect-milan::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -35px 0 0 -35px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.cbutton--effect-milan::after,
.cbutton--effect-milan::before {
	border: 4px solid rgba(255,255,255,0.1);
}

.cbutton--effect-milan.cbutton--click::after {
	-webkit-animation-name: anim-effect-milan-3, anim-effect-milan-1;
	animation-name: anim-effect-milan-3, anim-effect-milan-1;
	-webkit-animation-duration: 5s, 2s;
	animation-duration: 5s, 2s;
	-webkit-animation-iteration-count: 1, infinite;
	animation-iteration-count: 1, infinite;
	-webkit-animation-timing-function: ease, linear;
	animation-timing-function: ease, linear;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.cbutton--effect-milan.cbutton--click::before {
	-webkit-animation-name: anim-effect-milan-3, anim-effect-milan-2;
	animation-name: anim-effect-milan-3, anim-effect-milan-2;
	-webkit-animation-duration: 5s, 2s;
	animation-duration: 5s, 2s;
	-webkit-animation-iteration-count: 1, infinite;
	animation-iteration-count: 1, infinite;
	-webkit-animation-timing-function: ease, linear;
	animation-timing-function: ease, linear;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

@-webkit-keyframes anim-effect-milan-1 {
	0% {
		-webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);
		transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);
	}
	100% {
		-webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);
		transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);
	}
}

@keyframes anim-effect-milan-1 {
	0% {
		-webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);
		transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);
	}
	100% {
		-webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);
		transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);
	}
}

@-webkit-keyframes anim-effect-milan-2 {
	0% {
		-webkit-transform: perspective(1000px) rotate3d(-1, -1, -1, 0deg);
		transform: perspective(1000px) rotate3d(-1, -1, -1, 0deg);
	}
	100% {
		-webkit-transform: perspective(1000px) rotate3d(-1, -1, -1, 360deg);
		transform: perspective(1000px) rotate3d(-1, -1, -1, 360deg);
	}
}

@keyframes anim-effect-milan-2 {
	0% {
		-webkit-transform: perspective(1000px) rotate3d(1, -1, 1, 0deg);
		transform: perspective(1000px) rotate3d(1, -1, 1, 0deg);
	}
	100% {
		-webkit-transform: perspective(1000px) rotate3d(1, -1, 1, 360deg);
		transform: perspective(1000px) rotate3d(1, -1, 1, 360deg);
	}
}

@-webkit-keyframes anim-effect-milan-3 {
	0%, 100% {
		opacity: 0;
	}
	25%, 75% {
		opacity: 1;
	}
}

@keyframes anim-effect-milan-3 {
	0%, 100% {
		opacity: 0;
	}
	25%, 75% {
		opacity: 1;
	}
}

/* Zorka */
.cbutton--effect-zorka .cbutton__helper {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -35px 0 0 -100px;
	width: 200px;
	height: 70px;
	opacity: 0;
	-webkit-filter: url(../index.html#lb-goo-filter);
	filter: url(../index.html#lb-goo-filter);
	pointer-events: none;
}

.cbutton--effect-zorka .cbutton__helper::before,
.cbutton--effect-zorka .cbutton__helper::after {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -28px 0 0 -28px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgb(255,255,255);
	content: '';
}

.cbutton--effect-zorka.cbutton--click .cbutton__helper {
	-webkit-animation: anim-effect-zorka-1 0.7s ease-out;
	animation: anim-effect-zorka-1 0.7s ease-out;
}

.cbutton--effect-zorka.cbutton--click .cbutton__helper::before {
	-webkit-animation: anim-effect-zorka-2 0.7s ease-out forwards;
	animation: anim-effect-zorka-2 0.7s ease-out forwards;
}

.cbutton--effect-zorka.cbutton--click .cbutton__helper::after {
	-webkit-animation: anim-effect-zorka-3 0.7s ease-out forwards;
	animation: anim-effect-zorka-3 0.7s ease-out forwards;
}

@-webkit-keyframes anim-effect-zorka-1 {
	0% {
		opacity: 0.1;
	}
	50% {
		opacity: 0.175;
	}
	100% {
		opacity: 0;
	}
}

@keyframes anim-effect-zorka-1 {
	0% {
		opacity: 0.1;
	}
	50% {
		opacity: 0.175;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes anim-effect-zorka-2 {
	100% {
		-webkit-transform: translate3d(40px, 0, 0) scale3d(0.8, 0.8, 1);
		transform: translate3d(40px, 0, 0) scale3d(0.8, 0.8, 1);
	}
}

@keyframes anim-effect-zorka-2 {
	100% {
		-webkit-transform: translate3d(40px, 0, 0) scale3d(0.8, 0.8, 1);
		transform: translate3d(40px, 0, 0) scale3d(0.8, 0.8, 1);
	}
}

@-webkit-keyframes anim-effect-zorka-3 {
	100% {
		-webkit-transform: translate3d(-40px, 0, 0) scale3d(0.8, 0.8, 1);
		transform: translate3d(-40px, 0, 0) scale3d(0.8, 0.8, 1);
	}
}

@keyframes anim-effect-zorka-3 {
	100% {
		-webkit-transform: translate3d(-40px, 0, 0) scale3d(0.8, 0.8, 1);
		transform: translate3d(-40px, 0, 0) scale3d(0.8, 0.8, 1);
	}
}

/* Stana */
.cbutton--effect-stana .cbutton__helper {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -40px 0 0 -40px;
	width: 80px;
	height: 80px;
	opacity: 0;
	pointer-events: none;
}

.cbutton--effect-stana line {
	fill: none;
	stroke-width: 2;
}

.cbutton--box-color-7 line {
	stroke: #fff;
}

.cbutton--box-color-8 line {
	stroke: #fff;
}

.cbutton--box-color-9 line {
	stroke: #fff;
}

.clip-ring {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.cbutton--effect-stana.cbutton--click .cbutton__helper {
	-webkit-animation: anim-effect-stana 0.4s ease-in forwards;
	animation: anim-effect-stana 0.4s ease-in forwards;
}

@-webkit-keyframes anim-effect-stana {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;

		-webkit-animation-timing: ease-out;
		animation-timing: ease-out;
	}
}

@keyframes anim-effect-stana {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;

		-webkit-animation-timing: ease-out;
		animation-timing: ease-out;
	}
}

.cbutton--effect-stana.cbutton--click .clip-ring {
	-webkit-transition: -webkit-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
	-webkit-transform: scale3d(3, 3, 1);
	transform: scale3d(3, 3, 1);
}









/*首页*/
div.indexbannerback{ width:100%; height:573px; position:relative; margin-top:-8px;}
div.indexbannerback ul li div.indexbanner{ width:100%; height:573px;}
ul.ck-slide-wrapper {
	width: 100%;
	height: 573px;
	 position:absolute;}
ul.ck-slide-wrapper li {
	width: 100%;
	height: 573px;
	padding: 0;
	margin: 0;
	list-style: none;
	position: absolute;
	
}
div.indexbanner img{ width:100%;}
div.indexbannerleft{ width:52px; height:134px; position:absolute; left:0; top:50%; margin-top:-67px; background:url(../imagescn/sylx/indexbannerleft.png) center no-repeat;  z-index:11;}

div.indexbannerleft a{ display:block; width:52px; height:134px;}
div.indexbannerright a{ display:block; width:52px; height:134px;}
div.indexbannerright{width:52px; height:134px; position:absolute; right:0; top:50%; margin-top:-67px; background:url(../imagescn/sylx/indexbannerright.png) center no-repeat;  z-index:10;}

div.indexbannerqiehuanblock{ opacity:0.9;}
div.indexoneback{ width:100%; height:382px; background:#111111;}
div.indexone{ width:1200px; height:382px; margin:auto; background:url(../imagescn/sylx/indexonebackground.jpg) center no-repeat; position:relative;}
div.indexoneleft{ width:307px; height:217px; float:left; margin-top:72px; margin-left:10px; background:url(../imagescn/sylx/indexoneleftbg.jpg) center no-repeat;}
div.indexoneleft img{ width:302px; height:213px; margin-left:2px; margin-top:2px;}
div.indexoneright{ width:717px; height:208px; float:right; margin-top:175px;}
div.indexonerightsummary{ width:717px; height:96px; overflow:hidden; line-height:24px; color:#c1c1c1; font-size:12px;}
div.indexonerightmore{ width:34px; height:52px; line-height:52px; font-size:11px;}
div.indexonerightmore a{ font-family: 'montserrat-light-webfont'; color:#ff3227;}
div.indexonetitleback{ width:458px; height:44px; position:absolute; top:100px; left:680px;}
div.indexonetitle1{ width:220px; height:44px; background:url(../imagescn/sylx/indexonetitle1.jpg) center no-repeat;float:left;text-align:center;}
div.indexonetitle1 a{ color:#e73939; font-size:14px; line-height:44px; }
div.indexonetitle2{ width:210px; height:44px; background:url(../imagescn/sylx/indexonetitle2.jpg) center no-repeat; margin-left:28px; float:left; text-align:center;}
div.indexonetitle2 a{ color:#e73939; font-size:14px; line-height:44px;}
div.indextwoback{ width:100%; position:relative;}
div.indextwoback div.indextwobackimg{ width:100%;}
div.indextwoback div.indextwobackimg img{ width:100%;}
div.indextwolistback{ position:absolute; top:36.4%; width:85.7%; height:40.2%; left:6.4%;}
div.indextwolist{ width:18.1%; height:99.7%; float:left; margin-left:2.2%;}
div.indextwolistimg{ width:99.3%; height:auto; border:#afa5a5 1px solid; overflow:hidden;}
div.indextwolistimg img{ width:100%;  transition:all 0.5s;}
div.indextwolisttitle{ width:100%; height:29.2%; line-height:578%; color:#515151; font-size:18px; text-align:center;}
div.indextwolisttitle a{ color:#515151;}
div.indextwolistimg img:hover{-webkit-transform:scale(1.10);-moz-transform:scale(1.10);-o-transform:scale(1.10);transform:scale(1.10)}
div.indextwomoreback{ border:#737070 1px solid; text-align:center; line-height:40px; width:297px; height:40px; font-size:11px; margin:auto;}
div.indextwomoreback a{ color:#b42828;font-family: 'montserrat-light-webfont'; }
div.indexthreeback{ width:100%; height:auto;}
div.indexthreeleftback{ width:51.8%; float:left;}
div.indexthreeleftback img{ width:100%;}
div.indexthreerightback{ width:48.2%; float:left; position:relative;}

div.indexthreerightback img{ width:100%;}
div.indexthreerightwenzi{position:absolute; width:85%; height:23.6%;  top:39.5%; left:8.6%; color:#888888; font-size:12px; text-align:center; line-height:200%; overflow:hidden;}
div.indexthreerightmore{ position:absolute; width:28.9%; height:9.8%; left:35.5%; bottom:17.2%;}
div.indexthreerightmore img{ width:100%;}
div.indexfourback{ width:100%; height:809px; background:url(../imagescn/sylx/indexfourback.jpg) center no-repeat;}
div.indexfour{ width:1200px; height:482px; margin:auto;}
div.indexfourlistback{ width:577px; height:158px; overflow:hidden; float:left; margin-left:46px; margin-top:83px;}
div.indexfourlistleft{ width:160px; height:158px; float:left; background:url(../imagescn/sylx/indexfiveleftbg.jpg) center no-repeat; overflow:hidden; position:relative;}
div.indexfourlistleft img{  margin-left:1px; width:158px; height:156px; transition:all 1s;}
div.indexfourlistleft:hover img{-webkit-transform:scale(1.20);-moz-transform:scale(1.20);-o-transform:scale(1.20);transform:scale(1.20)}
div.indexfourlistright{ width:395px; height:158px; float:right;}
div.indexfourlistrighttime{ width:395px; height:47px; line-height:47px; color:#646464; font-size:12px;}
div.indexfourlistrighttitle{ width:395px; height:41px; line-height:41px; color:#b7b9b8; font-size:18px; overflow:hidden;}
div.indexfourlistrighttitle a{color:#b7b9b8; transition:all 0.4s;}
div.indexfourlistrighttitle a:hover{ color:#f03f3f;}
div.indexfourlistrightsummary{ width:395px; height:48px; overflow:hidden; line-height:24px; color:#757a76; font-size:14px;}
div.indexfiveback{ width:100%; position:relative;}
div.indexfivelistback{ width:calc(20% - 2px); height:auto; float:left; border:#000000 1px solid; overflow:hidden;position:relative;}
div.indexfivelistback img{ width:100%;-webkit-transform:scale(1.20);-moz-transform:scale(1.20);-o-transform:scale(1.20);transform:scale(1.20);transition:all 0.5s;}
div.indexfivelistback:hover{ border:#c6c3c3 1px solid;}
div.indexfivelistback:hover img{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
div.indexfivelistgai{ width:100%; height:100%; position:absolute; background:rgba(0,0,0, 0.8);top:0; left:0; opacity:0; transition:all 0.4s; transition:all 0.5s;}
div.indexfivelistgai a{ width:100%; height:100%; display:block;}
div.indexfivelistgaititle{ width:100%; height:17.6%; position:absolute;top:34.4%; overflow:hidden; color:#ffffff; font-size:18px; text-align:center; line-height:340%; transition:all 0.4s;-webkit-transform:scale(0.50);-moz-transform:scale(0.50);-o-transform:scale(0.50);transform:scale(0.50);}
div.indexfivelistgaititle a{ color:#fff;}
div.indexfivelistgaicn{ width:24.9%; height:13.6%; border-top:#a0a0a0 1px solid; position:absolute; left:50%; top:52%; margin-left:-12.45%; color:#ffffff; font-size:14px; line-height:320%; text-align:center; transition:all 0.4s;-webkit-transform:scale(0.50);-moz-transform:scale(0.50);-o-transform:scale(0.50);transform:scale(0.50);}
div.indexfivelistback:hover div.indexfivelistgai{ opacity:1;}
div.indexfivelistback:hover div.indexfivelistgaititle{ -webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
div.indexfivelistback:hover div.indexfivelistgaicn{  -webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);}



/*新闻*/
div.listbannerback{ width:100%; height:492px; margin-top:-8px;}
div.listback{ width:100%; height:auto; background-color:#e7e7e7; background-image:url(../imagescn/sylx/xinwenbg.jpg); background-position:top; background-repeat:no-repeat;}
div.xinwenlistback{ width:1200px; height:auto; margin:auto;}

div.newlistback{ width:577px; height:158px; overflow:hidden; float:left; margin-left:46px; margin-top:83px;}
div.newlistleft{ width:160px; height:158px; float:left; background:url(../imagescn/sylx/indexfiveleftbg.jpg) center no-repeat; overflow:hidden; position:relative;}
div.newlistleft img{  margin-left:1px; width:158px; height:156px; transition:all 0.4s;}
div.newlistleft:hover img{-webkit-transform:scale(1.10);-moz-transform:scale(1.10);-o-transform:scale(1.10);transform:scale(1.10)}
div.newlistright{ width:395px; height:158px; float:right;}
div.newlistrighttime{ width:395px; height:47px; line-height:47px; color:#646464; font-size:12px;}
div.newlistrighttitle{ width:395px; height:41px; line-height:41px; color:#b7b9b8; font-size:18px; overflow:hidden;}
div.newlistrighttitle a{color:#111111; transition:all 0.4s;}
div.newlistrighttitle a:hover{ color:#f03f3f;}
div.newlistrightsummary{ width:395px; height:48px; overflow:hidden; line-height:24px; color:#716d6d; font-size:14px;}



/*产品*/
div.chanpintopback{ width:1200px; height:334px; margin:auto;}
div.chanpintopleft{ width:565px; height:334px; float:left; margin-left:27px;}
div.chanpintoplefttitle{ width:565px; height:64px; background:url(../imagescn/sylx/chanpinlefttitle.png) center no-repeat;}
div.chanpintopleftsummary{ width:565px; height:180px; overflow:hidden; color:#5d5d5d; font-size:14px; line-height:30px; text-indent:2em; }
div.chanpinsousuo{ width:565px; height:45px; background:url(../imagescn/sylx/chanpinleftsousuo.png) center no-repeat;}
div.chanpinsousuoleft{ width:518px; height:45px; float:left; overflow:hidden;}
div.chanpinsousuoleft input{ width:518px; height:45px; color:#a7a7a7; font-size:14px; line-height:45px; padding-left:21px; background:none; border:none; outline:none;}
div.chanpinsousuoright{ width:31px; height:43px; float:left;}
div.chanpinsousuoright input{ font-size:0px; width:31px; height:43px; cursor:pointer; background:none; border:none;}
div.chanpintopright{ width:496px; height:334px; float:right; background:url(../imagescn/sylx/chanpinrightbg.png) center no-repeat; float:right;}
div.chanpintoprightimgback{ width:480px; height:320px; margin-left:8px; position:relative;}
div.chanpintoprightimgback ul.ck-slide-wrapper{width:480px; height:320px; position:absolute;}
div.chanpintoprightimgback ul.ck-slide-wrapper li{ position:absolute; width:480px; height:320px;}
div.chanpintoprightimgback ul.ck-slide-wrapper li img{width:480px; height:320px;}
div.slideWrap{ width:69px; height:14px; position:absolute; top:289px; left:210px;}
div.slideWrap ul.dot-wrap li{ width:14px; height:14px; border-radius:50%; background:#fff; margin-left:8px; float:left;}
div.slideWrap ul.dot-wrap li.current{ background:#d91618;}
div.chanpinbottomback{ width:1200px; height:auto; margin:auto;}
div.chanpinbottomnavback{ width:564px; height:167px; border:#afa5a5 1px solid; float:left; margin-top:15px; margin-left:17px;}
div.chanpinbottomnavimg{ width:181px; height:151px; float:left; margin-top:7px; margin-left:7px; border:#afa5a5 1px solid;}
div.chanpinbottomnavimg img{ width:181px; height:151px;}
div.chanpinbottomnavright{ width:330px; height:151px; float:right; float:left; margin-left:22px; margin-top:7px;}
div.chanpinbottomnavrighttitle{ width:330px; height:37px; overflow:hidden; color:#585858; font-size:18px; line-height:37px;}
div.chanpinbottomnavrighttitle a{color:#cacaca; transition:all 0.3s;}
div.chanpinbottomnavrightsummary{ width:330px; height:72px; overflow:hidden; line-height:24px; color:#a7a7a7; font-size:12px; transition:all 0.3s;}
div.chanpinbottomnavrightmore{ width:43px; height:30px; float:left; overflow:hidden; color:#ff0000; font-size:10px; line-height:30px;}
div.chanpinbottomnavrightmore a{ color:#ff0000; }
div.chanpinbottomnavrightline{ width:283px; height:14px; border-top:#acb7b6 1px solid; margin-top:15px; float:left;}
div.chanpinbottomnavback:hover div.chanpinbottomnavrightsummary{ color:#525252;}
div.chanpinbottomnavback:hover div.chanpinbottomnavrighttitle a{ color:#5e5d5d;}













div.danyezhongjian{ width:1200px; height:auto; margin:auto; font-size:14px; line-height:200%; color:#585858; min-height:400px;}
div.listbannerbottomback{ width:100%; height:110px; background:url(../imagescn/sylx/products_03.jpg) center no-repeat;}
div.listbannerbottom{ width:1200px; height:110px; margin:auto;}
div.listbannerbottomtitleback{ width:600px; height:42px; margin-left:52px;}
div.listbannerbottomtitle{ width:600px; height:52px; line-height:18px; color:#ffffff; }
div.listbannerbottomtitle p{ color:#676767; font-size:12px;}
div.publicnavxialaleftimg11{ width:327px; height:191px; position:absolute; left:0; top:0; display:none;}
div.zuocexialaimg{ display:block;}




div.danyezhongjian form{ width:1200px; height:auto;}
div.danyezhongjian form input{ margin-left:10px; background:none; border:#afa5a5 1px solid; outline:none; height:20px; line-height:20px; color:#525252; font-size:14px;}
















div.anlifivelistback{ width:381px; height:330px; float:left; border:#000000 1px solid; overflow:hidden;transition:all 0.4s; position:relative;    margin-left: 25px;
    margin-top: 25px;}
div.anlifivelistback img{ width:100%;-webkit-transform:scale(1.10);-moz-transform:scale(1.10);-o-transform:scale(1.10);transform:scale(1.10); transition:all 0.4s;}
div.anlifivelistback:hover{ border:#c6c3c3 1px solid;}
div.anlifivelistback:hover img{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
div.anlifivelistgai{ width:100%; height:100%; position:absolute; background:rgba(0,0,0, 0.8); top:-100%; left:0; transition:all 0.4s;}
div.anlifivelistgai a{ width:100%; height:100%; display:block;}
div.anlifivelistgaititle{ width:100%; height:17.6%; position:absolute; top:34.4%; overflow:hidden; color:#ffffff; font-size:18px; text-align:center; line-height:340%;}
div.anlifivelistgaititle a{ color:#fff;}
div.anlifivelistgaicn{ width:24.9%; height:13.6%; border-top:#a0a0a0 1px solid; position:absolute; left:50%; top:52%; margin-left:-12.45%; color:#ffffff; font-size:14px; line-height:320%; text-align:center;}
div.anlifivelistback:hover div.anlifivelistgai{ top:0;}





/*案例*/
div.anlixiang{width:1200px;}
.work-big{ margin-bottom:20px; position:relative;width:1200px; height:650px; overflow:hidden;}
.work-big ul{width:1200px; height:650px;}
.work-big ul li{ position:absolute; width:1200px; height:650px; }
.work-big ul li img{ width:1200px;}
.work-big a{ position:absolute; top:50%; display:block; margin-top:-15px; width:30px; height:30px; background:url(../imagescn/sylx/prev_next.png); opacity:0.7; filter:alpha(opacity=70);}
.work-big a.work-detail-prev{ left:30px; background-position:0 0px;}
.work-big a.work-detail-next{ right:30px; background-position:-30px 0px;}
.work-small ul li{ position:relative; float:left; margin:0 5px 40px 5px; width:140px; height:76px;cursor:pointer;}
.work-small ul li p{ position:absolute; top:0; left:0;z-index:1; width:140px; height:76px; background:#000; opacity:0.75; filter:alpha(opacity=75);}
.work-small ul li img{width:140px; height:76px; position:absolute; top:0; left:0;}
.work-small ul li p.work-small-active{ opacity:0 !important; filter:alpha(opacity=0) !important;}
div.anlixiang p.anlixiangtitle{line-height:100px;font-size:16px;font-weight:bold;color:#3f3f3f;}
div.anlixiangcontent{width:1200px;}
div.anlixiangcontent p{line-height:25px;color:#8e8e8e;}













/*新*/
div.indexnewxinwengaibg{ width:160px; height:158px; background:url(../imagescn/sylx/indexnewxinwengai.png) center no-repeat; position:absolute; top:0; left:0;}
div.indexnewxinwengaibg a{ display:block; width:100%; height:100%;}






div.navsix {
width: 100%;
height:661px;
position: relative;
}
div.navsix div.navsixtitle{width:20%;float:left; position:relative;}
div.navsixtitleabwenzi{ width:100%; height:100%; position:absolute; top:0; left:0;}
div.navsixtitleabwenzi img{ width:100%;}
div.navsix div.navsixtitle img.navsixtitle{width:100%;}
div.navsix div.navsixnei{width:20%;float:left;height:50%; overflow:hidden;}
div.navsix div.navsixnei img.navsix{width:100%;height:100%;}

div.indexanlitopline{ width:100%; height:1px; background:url(../imagescn/sylx/indexanlitopline.jpg) repeat; margin-bottom:1px;}



div.guanyuanniu{ width:1200px; height:348px;}
div.guanyuanniunav{ width:370px; height:168px; float:left; margin-left:12px; margin-top:12px;} 










/*右侧qq*/
div.followrightqq{ width:130px; height:178px; position:fixed; right:0; top:35%; background:url(../imagescn/sylx/x05.jpg) center no-repeat; z-index:999999;}
div.followrightqq a{ display:block; width:100%; height:100%; z-index:99999;}